<template>
  <div class="directory-tree">
    <el-tree
        :data="directories"
        @node-click="handleNodeClick"
        node-key="id"
        default-expand-all
        :props="{ label: 'name' }"
    ></el-tree>
  </div>
</template>

<script>
import { getDirectoryTree } from '@/api/document';

export default {
  data() {
    return {
      directories: []
    };
  },
  methods: {
    handleNodeClick(data) {
      this.$emit('directory-selected', data);
    },
    async fetchDirectories() {
      try {
        const res = await getDirectoryTree();
        this.directories = res.data;
      } catch (error) {
        console.error('获取目录失败:', error);
        this.$message.error('获取目录失败');
      }
    }
  },
  created() {
    this.fetchDirectories();
  }
};
</script>

<style scoped>
.directory-tree {
  padding: 10px;
}
</style>